<template>
    <a-layout-header class="header">
        <router-link to="/index">
            <div
                v-if="
                    typeof props.logo === 'string' &&
                    matchImageSuffix(props.logo)
                "
                class="logo"
                :style="{ backgroundImage: `url(${logo})` }"
            ></div>
            <div v-else class="logotext">{{ props.logo }}</div>
        </router-link>
        <a-menu
            v-model:selectedKeys="selectedKeys1"
            mode="horizontal "
            :style="{ lineHeight: '18px' }"
        >
            <a-menu-item v-for="item in props.headers" :key="item.to">
                <router-link :to="item.to">
                    <div class="navbox">
                        <img v-if="item.icon" :src="item.icon" />
                        <p>{{ item.text }}</p>
                    </div>
                </router-link>
            </a-menu-item>
        </a-menu>
    </a-layout-header>
</template>

<script lang="ts" setup>
import { PropType, ref } from 'vue';
function matchImageSuffix(filename: string) {
    const regex = /\.(jpg|jpeg|png|gif|bmp)$/i;
    return filename.match(regex);
}
const props = withDefaults(
    defineProps<{
        logo: string;
        headers: Header[];
    }>(),
    {
        headers: () => [
            { to: '/index', text: '首页' },
            { to: '/repair', text: '报修' },
            { to: '/repairList', text: '报修列表' }
        ]
    }
);

// const props = withDefaults(
//     defineProps<{
//         logo: { type: String | Object };
//         headers: Header[];
//     }>(),
//     {
//         headers: () => [
//             { to: '/index', text: '首页' },
//             { to: '/repair', text: '报修' },
//             { to: '/repairList', text: '报修列表' }
//         ]
//     }
// );

const selectedKeys1 = ref<string[]>(['/water/index']);
</script>

<style lang="scss" scoped>
@import '@/assets/style/header.scss';
</style>
